<template>
	<view class="container">
		<view class="row-a1" v-if="$userInfo.teacher">
			<view class="form">
				<u-form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm">
					<view class="title">
						个人信息
					</view>
					<u-form-item label="姓名" prop="name" borderBottom>
						<u-input placeholder="请输入内容" border="surround" v-model="form.name"></u-input>
					</u-form-item>
					<u-form-item label="邮箱" prop="email" borderBottom>
						<u-input placeholder="请输入内容" border="surround" v-model="form.email"></u-input>
					</u-form-item>
					<u-form-item label="联系电话" prop="mobile" borderBottom>
						<u-input placeholder="请输入内容" border="surround" v-model="form.mobile"></u-input>
					</u-form-item>
					<u-form-item label="身份证号" prop="idcard" borderBottom>
						<u-input placeholder="请输入内容" border="surround" type="idcard" v-model="form.idcard"></u-input>
					</u-form-item>
					<view class="title top">
						教学经验
					</view>
					<u-form-item label="课程链接/备注" prop="form.remark" borderBottom>
						<u-textarea v-model="form.remark" placeholder="请输入内容"></u-textarea>
					</u-form-item>
					<view class="title top">
						资格证书上传
					</view>
					<u-form-item label="文件上传" prop="form.fileList" borderBottom>
						<view class="upload">
							<u-upload :fileList="fileList" size="80" @delete="deletePic" name="1" multiple
								:maxCount="10"></u-upload>
						</view>
					</u-form-item>
					<u-button @click="submit" type="primary">提交</u-button>
				</u-form>
			</view>
		</view>
		<view class="row-a2" v-else>
			<view class="icon">
				<u-icon name="clock-fill" size="20" color="#f9ae3d">

				</u-icon>
			</view>
			<view class="title">
				<view class="tit">
					审核中
				</view>
				<view class="desc">
					我们正在审核您的教师申请,通常需要1-3个工作日
				</view>
				<view class="progress">
					<u-line-progress :percentage="60" :showText="false"></u-line-progress>
				</view>
				<view class="tips">
					审核进度:60%
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				form: {
					name: "",
					email: "",
					mobile: "",
					idcard: "",
					remark: "",
					fileList: []
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写名称',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'idcard': {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					}
				},
				fileList: []
			};
		},
		computed: {
			...mapState(['$userInfo']),
		},
		methods: {
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
			cancel() {

			},
			submit() {
				this.$refs.uForm.validate().then(res => {

					if (this.title == '编辑课程') {

						uni.$u.route({
							url: "/pages/myClass/index",
							type: "reLaunch"
						})
					}
				});
			},
			reset() {

			}
		},
		onLoad(options) {
		},
		onUnload() {
		}
	};
</script>

<style lang="scss">
	.container {
		.row-a1 {
			background-color: #fff;
			padding: 5px;

			.form {
				.title {
					font-size: 32rpx;
					font-weight: bold;

					&.top {
						padding-top: 20px;
					}
				}

				.item {
					width: 100%;
				}

				.upload {
					width: 100px;
					height: 100px;

					.u-upload__button {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.row-a2 {
			padding: 50px 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			margin: 10px;
			border-radius: 10px;

			.icon {
				margin-bottom: 10px;
				padding: 15px;
				border-radius: 50%;
				background-color: #fef9c3;
			}

			.title {
				text-align: center;

				.tit,
				.desc,
				.progress {
					margin-bottom: 10px;
				}

				.tips {
					color: #a8acaa;
				}
			}
		}
	}
</style>